<template>
  <div class="order" v-if="insurancesData.insurances.length">
    <!-- 添加乘客 -->
    <div class="passager">
          <el-card class="box-card" v-for="(item , index) in userData" :key="index">
          <div slot="header" class="clearfix header">
            <h1>乘机人</h1>
            <i class="el-icon-circle-close" @click="removePassagerByIndex(index)"></i>
          </div>
          <div style="margin-top:10px; font-size:14px">乘机人类型</div>
          <el-input placeholder="姓名" v-model="item.username" >
              <el-select v-model="adult" slot="prepend" placeholder="成人">
                <el-option label="成人" value="1">成人</el-option>
              </el-select>
          </el-input>
          <div style="margin-top:10px; font-size:14px">证件类型</div>
          <el-input placeholder="证件号码" v-model="item.id">
              <el-select v-model="idCard" slot="prepend" placeholder="身份证">
                <el-option label="身份证" value="1">身份证</el-option>
              </el-select>
            </el-input>
        </el-card>
        <el-button type="primary" size="middle" class="addBtn" @click="addPassager">添加乘机人</el-button>
    </div>

    <!-- 保险信息 -->
    <div class="insurance">
       <h2>保险</h2>
       <div>
         <div class="insurance-items" v-for="(item,index) in insurancesData.insurances" :key="index">
           <el-checkbox :v-model="item.id" :label="`${item.type} ￥${item.price}/份x1 最高赔付${item.compensation}`" border @change="addInsuranceId(item,item.price)"></el-checkbox>
         </div>
       </div>
    </div>
  <!-- 联系人信息 -->
    <div class="contact">
      <h2>联系人</h2>
      <el-row>
        <el-col><span>姓名</span> <el-input placeholder="请输入姓名" v-model="contactName"></el-input></el-col>
        <el-col>
          <span>手机</span>
              <el-input placeholder="请输入手机号" v-model="comfirmnum">
                  <el-button slot="append" @click="sendConfirm"> 发送验证码</el-button>
              </el-input>
            </el-col>
        <el-col>
          <span>验证码</span>
          <el-input v-model="confirmNum"></el-input>
        </el-col>
      </el-row>
    </div>
     <!-- 侧边栏 -->
    <div class="aside" >
        <el-card >
           <el-row type="flex" align="middle" justify="center">
              <el-col :span="6">{{insurancesData.arr_date}}</el-col>
              <el-col :span="12"></el-col>
              <el-col :span="6">{{insurancesData.org_city_name}}-{{insurancesData.dst_city_name}}</el-col>
           </el-row>
           <el-row type="flex" align="middle" justify="center" style="height:100px;text-align:center;">
              <el-col :span="8">
                 <span>{{insurancesData.dep_time}}</span>  <br>
                {{insurancesData.org_airport_name}}
              </el-col>
              <el-col :span="8" class="D-time">
                --{{rankTime}}--<br>
                 {{insurancesData.airline_name}} {{insurancesData.flight_no}}
              </el-col>
              <el-col :span="8">
                 <span>{{insurancesData.arr_time}}</span> <br>
               {{insurancesData.dst_airport_name}}
              </el-col>
           </el-row>
           <el-row type="flex" align="middle" justify="center">
              <el-col :span="9">订单总价</el-col>
              <el-col :span="9">金额</el-col>
              <el-col :span="6">数量</el-col>
           </el-row>
           <el-row type="flex" align="middle" justify="center">
                <el-col :span="9">成人机票</el-col>
                <el-col :span="9">￥ {{insurancesData.seat_infos.settle_price}}</el-col>
                <el-col :span="6">x1</el-col>
           </el-row>
           <el-row type="flex" align="middle" justify="center">
                <el-col :span="9">机建+燃油</el-col>
                <el-col :span="9">￥{{insurancesData.airport_tax_audlet}}/人/单程</el-col>
                <el-col :span="6" >x1</el-col>
           </el-row>
           <el-row type="flex" align="middle" justify="center" :gutter="60">
                <el-col :span="13">应付总额</el-col>
                <el-col :span="11" class="total-price" >￥{{totalPrice}}</el-col>
           </el-row>
        </el-card>
    </div>

    <!-- 提交按钮 -->
    <div class="submitBtn">
        <el-button type="warning" @click="sunmitPasInfo">提交</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      userData: [
        {
          username: '',
          id: ''
        }
      ],
      adult: '',
      idCard: '',
      insurancesData: {
        dep_time: '',
        arr_time: '',
        seat_infos: {},
        insurances: []
      },
      confirmNum: '',
      insPrice: 0,
      // 提交订单需要的信息
      contactName: '',
      contactPhone: '',
      insurances: [],
      invoice: true,
      seat_xid: this.$route.query.seat_xid,
      id: this.$route.query.id,
      comfirmnum: ''
    }
  },
  methods: {
    addPassager () {
      this.userData.push({
        username: '',
        id: ''
      })
    },
    removePassagerByIndex (index) {
      this.userData.splice(index, 1)
    },
    addInsuranceId (item, price) {
      const index = this.insurances.indexOf(item.id)
      if (index !== -1) {
        this.insurances.splice(index, 1)
        this.insPrice = this.insPrice - price
      } else {
        this.insurances.push(item.id)
        this.insPrice += price
      }
    },
    sendConfirm () {
      if (this.contactPhone === '') return
      this.$http.post('/captchas', { tel: this.contactPhone }).then(res => {
        this.$message.success(`获取成功，您的验证码是${res.data.code}`)
        this.comfirmnum = res.data.code
      })
    },
    sunmitPasInfo () {
      this.$http.post('/airorders',
        {
          users: this.userData,
          insurances: this.insurances,
          contactName: this.contactName,
          contactPhone: this.contactPhone,
          invoice: this.invoice,
          seat_xid: this.seat_xid,
          air: this.id,
          captcha: this.confirmNum
        },
        {
          headers: {
            Authorization: `Bearer ${this.$store.state.user.userInfo.token}`
          }
        }
      ).then(res => {
        if (res.status !== 200) return
        console.log(res)
        const { data } = res.data
        this.$router.push({
          path: '/plane/pay',
          query: {
            id: data.id
          }
        })
      }).catch(err => {
        console.log(err)
      })
    }
  },
  mounted () {
    this.$http.get(`/airs/${this.$route.query.id}`, { params: { seat_xid: this.$route.query.seat_xid } }).then(res => {
      console.log(res.data)
      this.insurancesData = res.data
    }).catch(err => {
      console.log(err)
    })
  },
  computed: {
    rankTime () {
      const arrT = this.insurancesData.arr_time.split(':')
      const depT = this.insurancesData.dep_time.split(':')
      if (depT[0] > arrT[0]) {
        arrT[0] = arrT[0] + 24
      }
      const diffMin = (arrT[0] * 60 + +arrT[1]) - (depT[0] * 60 + +depT[1])
      const Hour = Math.floor(diffMin / 60)
      const Min = diffMin % 60
      const dtime = `${Hour}时${Min}分`
      return dtime
    },
    totalPrice () {
      console.log(this.insurancesData.insurances.price)
      let price = 0
      price += this.insurancesData.seat_infos.settle_price
      price += this.insurancesData.airport_tax_audlet
      price += this.insPrice
      price = price * this.userData.length
      return Number(price).toFixed(2)
    }
  }
}
</script>
<style lang="less" scoped>
.order {
  width: 1000px;
  margin: 0 auto;
  box-shadow: 0 -1px 5 #eee;
  position: relative;
  .passager{
    width: 700px;
    border-bottom: 2px solid #eee;
    padding-bottom: 20px;
    .box-card{
      background-color: cornsilk;
      &:first-child{
        .header{
          i{
            display: none;
          }
        }
      }
    .header{
      position: relative;
      h1{
        font-size: 25px;
      }
      i{
        position: absolute;
        color: rgb(224, 127, 127);
        font-size: 25px;
        right: 10px;
        top: 0;
      }
    }
    margin-top: 25px;
    width: 700px;
    .el-input{
      margin-top: 20px;
      .el-select{
        width: 100px;
      }
    }
  }
    .addBtn{
      background-color: cornflowerblue;
      margin-top: 30px;
    }
  }
  .insurance{
    margin-top: 20px;
    width: 700px;
    border-bottom: 2px solid #eee;
    padding-bottom: 20px;
    h2{
      font-size: 25px;
    }
    .insurance-items{
      margin: 10px 0;
    }
  }
  .contact{
    margin-top: 20px;
    width: 700px;
    padding-bottom: 20px;
    .el-row{
      margin-top: 10px;
      /deep/.el-col{
        span{
          display:inline-block;
          width: 70px;
          font-size: 15px;
          text-align: right;
        }
        .el-input{
          width: 300px;
          margin: 10px 10px;
        }
      }
    }
    h2{
      font-size: 25px;
    }
  }
  .submitBtn{
    margin: 30px auto;
    width: 700px;
    /deep/.el-button{
      width: 300px;
    }
  }
  .aside{
    position: absolute;
    right: -80px;
    top: 0;
    width: 350px;
    border: 1px solid #eee;
    text-align: center;
    .el-card{
      .el-row{
        font-size: 14px;
        height: 40px;
        span{
          font-weight: bold;
          font-size: 18px;
        }
        .total-price{
            font-size: 25px;
            color: orange;
          }
          .D-time{
            color: rgb(185, 184, 184);
          }
      }
      .el-row{
        border-bottom: 1px solid #eee;
      }
      .el-row:nth-child(1),
      .el-row:nth-child(2){
        border-bottom:0;
      }
      .el-row:nth-child(1){
        font-size: 13px;
        font-weight: bold;
      }
    }
  }
}
</style>
